<template>
    <div id="account">
            <div class="navtop">
                <el-tabs value="first" @tab-click="handleClick" >
                    <el-tab-pane label="统计汇总" name="first">
                    </el-tab-pane>
                    <el-tab-pane label="企业简介" name="second" >
                    </el-tab-pane>
                    <el-tab-pane label="企业详情" name="third">
                    </el-tab-pane>
                    <el-tab-pane label="个人资料" name="four">
                    </el-tab-pane>
                    <el-tab-pane label="账户余额" name="five">
                    </el-tab-pane>
                    <el-tab-pane label="我的余额" name="five">
                    </el-tab-pane>
                </el-tabs> 
            </div> 
            <div class="footerconfirm">
                                <el-button type="primary" @click="saveForm('form')" >确认修改</el-button>
                                <el-button type="warning" >清空</el-button>
            </div>
<div class="form_wrap " >
<el-form ref="form"  :model="data" label-width="150px" >
            <div ref="form1">
                   <el-header>统计汇总</el-header>
                   <el-row>
                      <el-col :span="12">
                        <el-form-item label="收款总金额：">
                          <div>￥{{sumData.counPrice}}</div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                        <el-form-item label="账户注册日期：" >
                          <div>{{sumData.createTime}}</div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="总订单数：" >
                                <div>{{sumData.countOrder}}</div>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                            <el-form-item label="已售商品品种：" >
                                <div>{{sumData.countOrder}}</div>
                            </el-form-item>
                      </el-col>
                       <el-col :span="12">
                        <el-form-item label="已售商品款式：" >
                          <div>{{sumData.styleNumber}}</div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                        <el-form-item label="下单客户数：">
                          <div>{{sumData.userNumber}}</div>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item label="上架商品款式：">
                                <div>{{sumData.shelfStyle}}</div>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                            <el-form-item label="登录次数：" >
                                <div>{{sumData.loginCount}}</div>
                            </el-form-item>
                      </el-col>
                        <el-col :span="12">
                          <el-form-item label="下架商品品种：" >
                                <div>{{sumData.lowerdata}}</div>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                            <el-form-item label="被投诉："  >
                                <div>{{sumData.complaint}}</div>
                            </el-form-item>
                      </el-col>
                    <el-col :span="12">
                          <el-form-item label="下架商品款式：" >
                                <div>{{sumData.lowerStyle}}</div>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                            <el-form-item label="待发货：" >
                                <div>{{sumData.pendingDelivery}}</div>
                            </el-form-item>
                      </el-col>
                        <el-col :span="12">
                          <el-form-item label="已取消：" >
                                <div>{{sumData.cancel}}</div>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12"> 
                            <el-form-item label="待付款："  >
                                <div>{{sumData.pendingPayment}}</div>
                            </el-form-item>
                      </el-col>
                    </el-row>
            </div>     
            <div  ref="form2">
                    <el-container>
                        <el-header>企业简介</el-header>
                        <el-row>
                        <el-col :span="24"> 
                                <el-form-item label="企业名称"  prop="name" :rules="[ { required: true, message: '请输入企业名称', trigger: 'blur' }]">
                                     <el-input v-model="data.name "></el-input>
                                </el-form-item>
                                <el-form-item label="企业性质"  prop="nature" :rules="[ { required: true, message: '请输入企业性质', trigger: 'blur' }]">
                                    <el-input v-model="data.nature"></el-input>
                                </el-form-item>
                                <el-form-item label="所在行业"  prop="industry" :rules="[ { required: true, message: '请输入所在行业', trigger: 'blur' }]">
                                     <el-input v-model="data.industry"></el-input>
                                </el-form-item>
                                <el-form-item label="经营模式"  prop="businessModel" :rules="[ { required: true, message: '请输入经营模式', trigger: 'blur' }]">
                                     <el-input v-model="data.businessModel"></el-input>
                                </el-form-item>
                                <el-form-item label="企业简介"  prop="describe" :rules="[ { required: true, message: '请输入企业简介', trigger: 'blur' }]">
                                     <el-input v-model="data.describe"></el-input>
                                </el-form-item>
                                <el-form-item label="主营产品"  prop="business" :rules="[ { required: true, message: '请输入主营产品', trigger: 'blur' }]">
                                     <el-input v-model="data.business"></el-input>
                                </el-form-item>
                                <el-form-item label="法人姓名"  prop="legalPerson" :rules="[ { required: true, message: '请输入法人姓名', trigger: 'blur' }]">
                                     <el-input v-model="data.legalPerson"></el-input>
                                </el-form-item>
                                <el-form-item label="营业执照" prop="businessLicense" :rules="[ { required: true, message: '请上传营业执照照片', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                      <pictureview  @add-parent-img='handleImgSuccessBusiness' :indexImg='0' :selectedImg="data.businessLicense"></pictureview>
                                  </div>
                              </el-form-item>
                               <el-form-item label="法人委托书" prop="letterAttorney" :rules="[ { required: true, message: '请上传法人委托书照片', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                      <pictureview  @add-parent-img='handleImgSuccessLetter' :selectedImg="data.letterAttorney"></pictureview>
                                  </div>
                              </el-form-item>
                        </el-col>
                        </el-row>
                    </el-container>

            </div>
          <div  ref="form3" class="form3">  
                <el-header>企业详情</el-header>
                    <el-row>
                        <el-col :span="24"> 
                                <el-form-item label="客户群"  prop="customerGroup" :rules="[ { required: true, message: '请输入客户群', trigger: 'blur' }]">
                                     <el-input v-model="data.customerGroup"></el-input>
                                </el-form-item>
                                <el-form-item label="客户特征"  prop="groupFeatures" :rules="[ { required: true, message: '请输入客户特征', trigger: 'blur' }]">
                                     <el-input v-model="data.groupFeatures"></el-input>
                                </el-form-item>
                                <!-- <el-form-item label="所在城市"  prop="city">
                                     <el-input v-model="data.city"></el-input>
                                </el-form-item> -->
                                <el-form-item label="企业地址"  prop="address" :rules="[ { required: true, message: '请输入企业地址', trigger: 'blur' }]">
                                     <div class="el-flex" >
                                        <el-col :span="12">
                                                <!-- <div id="app"> -->
                                                    <el-cascader
                                                    size="large"
                                                    :options="option"
                                                    v-model="selectedOption"
                                                    @change="addressChange">
                                                    </el-cascader>
                                                <!-- </div> -->
                                        </el-col>
                                        <el-col :span="12" :rules="[ { required: true, message: '请输入企业详细地址', trigger: 'blur' }]">
                                                <el-input v-model="data.address" placeholder="请输入详细地址"></el-input>
                                        </el-col>
                                    </div>
                                </el-form-item>
                                <el-form-item label="员工人数"  prop="staffNumber" :rules="[ { required: true, message: '请输入员工人数', trigger: 'blur' }]">
                                     <el-input v-model="data.staffNumber"></el-input>
                                </el-form-item>
                                <el-form-item label="成立时间"  prop="establishTime" :rules="[ { required: true, message: '请输入成立时间', trigger: 'blur' }]">
                                     <!-- <el-input v-model="moment(data.establishTime).format('YYYY-MM-DD HH:mm:ss')"></el-input> -->
                                      <el-date-picker
                                        v-model="data.establishTime"
                                        type="datetime"
                                        placeholder="选择日期时间"
                                        default-time="12:00:00">
                                        </el-date-picker>
                                </el-form-item>
                                <el-form-item label="年均销售额"  prop="annualSales" :rules="[ { required: true, message: '请输入年均销售额', trigger: 'blur' }]">
                                     <el-input v-model="data.annualSales"></el-input>
                                </el-form-item>
                                <el-form-item label="座机电话" prop="landlinePhone" :rules="[ { required: true, message: '请输入座机电话', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                     <el-input v-model="data.landlinePhone"></el-input>
                                  </div>
                              </el-form-item>
                               <el-form-item label="企业综合介绍" prop="enterpriseIntroduce" :rules="[ { required: true, message: '请上传企业综合介绍图片', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                      <pictureviews   @add-parent-img='handleImgSuccessIntroduce' :selectedImg="data.enterpriseIntroduce"></pictureviews>
                                  </div>
                              </el-form-item>
                               <el-form-item label="企业店铺介绍" prop="imager" :rules="[ { required: true, message: '请上传企业店铺介绍图片', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                      <pictureview  @add-parent-img='handleImgSuccessImager' :selectedImg="data.imager"></pictureview>
                                  </div>
                              </el-form-item>
                        </el-col>
                        </el-row>
          </div>  
            <div  ref="form4" class="clearfix">  
                  <el-header>个人信息</el-header>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="姓名：" prop="userName" :rules="[ { required: true, message: '请输入姓名', trigger: 'blur' }]" >
                                    <div class="el-flex" >
                                        <el-input v-model="data.userName"></el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="姓别：" prop="sex" :rules="[ { required: true, message: '请输入姓别', trigger: 'blur' }]">
                                    <div class="el-flex" >
                                        <!-- <el-input v-model="data.sex"></el-input> -->
                                         <el-radio-group v-model="data.sex">
                                            <el-radio label="男"></el-radio>
                                            <el-radio label="女"></el-radio>
                                        </el-radio-group>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="职位：" prop="role" :rules="[ { required: true, message: '请输入职位', trigger: 'blur' }]" >
                                    <div class="el-flex" >
                                        <el-input v-model="data.role "></el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="电话：" prop="phone" :rules="[ { required: true, message: '请输入电话', trigger: 'blur' }]">
                                    <div class="el-flex" >
                                        <el-input v-model="data.phone"></el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                             <el-form-item label="收货地址：" prop="receivingAddress" :rules="[ { required: true, message: '请输入收货地址', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                       
                                            <div id="app">
                                                <el-cascader
                                                size="large"
                                                :options="options"
                                                v-model="selectedOptions"
                                                @change="addressChanges">
                                                </el-cascader>
                                            </div>
                                  </div>
                            </el-form-item> 
                             </el-col>
                            <el-col :span="12">
                                            <el-input v-model="data.receivingAddress"  placeholder="请输入详细地址"></el-input>
                             </el-col>
                            <el-col :span="12">
                                <el-form-item label="绑定收款账户：" prop="binding" :rules="[ { required: true, message: '请绑定收款账户', trigger: 'blur' }]">
                                    <div class="el-flex" >
                                        <el-input v-model="data.binding"></el-input>
                                    </div>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                            <el-form-item label="账户名：" prop="accountNumber" :rules="[ { required: true, message: '请输入账户名', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                    <el-input v-model="data.accountNumber"></el-input>
                                  </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="12">

                            <el-form-item label="输入密码：" prop="password" :rules="[ { required: true, message: '请输入密码', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                    <el-input v-model="data.password"></el-input>
                                  </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="12">

                            <el-form-item label="确认密码：" prop="password" :rules="[ { required: true, message: '请确认密码', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                    <el-input v-model="passwords"></el-input>
                                  </div>
                            </el-form-item>
                            </el-col>
                            <el-col :span="12">

                              <el-form-item label="显示网名：" prop="netName" :rules="[ { required: true, message: '请显示网名', trigger: 'blur' }]">
                                  <div class="el-flex" >
                                    <el-input v-model="data.netName"></el-input>
                                  </div>
                            </el-form-item>
                            </el-col>
                        </el-row>
            </div>

</el-form>
          </div>
</div>
</template>

<script>
 import { regionData,CodeToText } from 'element-china-area-data'
import pictureview from "@/components/my-components/pictureview/index";
import pictureviews from "@/components/my-components/pictureviews/index";
import Qs from 'qs'

export default {
  data: function() {
    return {
    option: regionData,
    selectedOption: [],
    options: regionData,
    selectedOptions: [],
     data:{
            // "enterpriseId": 1,
            // "userId": 1,
            // "name": "二一一",
            // "nature": "民营",
            // "industry": "教育培训",
            // "businessModel": "自营",
            // "describe": "无",
            // "business": "培训课程",
            // "legalPerson": "袁国顺",
            // "businessLicense": "1BCO",
            // "letterAttorney": "1BCO",
            // "customerGroup": "无",
            // "groupFeatures": null,
            // "province": "河南省",
            // "city": "郑州市",
            // "area": "XX区",
            // "address": "XX路",
            // "staffNumber": 80,
            // "establishTime": 1536230288000,
            // "annualSales": null,
            // "landlinePhone": "0755-0000",
            // "enterpriseIntroduce": [
            //     {
            //     "id": 1,
            //     "imager": "LMTq"
            //     },
            //     {
            //     "id": 2,
            //     "imager": "1BCO"
            //     },
            //     {
            //     "id": 3,
            //     "imager": "1BCO"
            //     }
            // ],
            // "imager": "http://92.168.0.199:8086/one9-web/file?idStr=1BCO",
            // "userName": "吴柯",
            // "sex": "MAN",
            // "role": "",
            // "phone": "18316443814",
            // "receivingAddress": "广东省||深圳市||南山区||广东省深圳市",
            // "binding": "",
            // "accountNumber": "吴柯",
            // "password": "123456",
            // "netName": "五"
            },
      value2: "",
      tabType: 0,//顶部导航
      sumData:{},
      scrollHeight: 0,
      passwords:'',
    };
  },
  components: {
    pictureview,
    pictureviews,
  },
methods:{
     addressChange(arr) {
                console.log(arr);
           this.$set(this.data, "province",CodeToText[arr[0]]);     
           this.$set(this.data, "city",CodeToText[arr[1]]);     
           this.$set(this.data, "area",CodeToText[arr[2]]);     
                // console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
    },
    addressChanges(arr) {
                console.log(arr);
           this.$set(this.data, "userProvince",CodeToText[arr[0]]);     
           this.$set(this.data, "usercity",CodeToText[arr[1]]);     
           this.$set(this.data, "userarea",CodeToText[arr[2]]);     
                // console.log(CodeToText[arr[0]], CodeToText[arr[1]], CodeToText[arr[2]]);
    },
    sum(){
         this.$axios.get("/one9-web/account/statistics" )
            .then(res => {
            if (res.code = "OK") {
                // console.log(res.data);
                this.sumData = res.data[0];
            }
        });
    },
    getdata(){
        this.$axios.get('/one9-web/account/enterprise').then(res=>{
            if(res.code='OK'){
                this.data=res.data[0];
                this.selectedOption=JSON.parse(res.data[0].addressNo);
                this.selectedOptions=JSON.parse(res.data[0].addressNos);
                // this.selectedOption=[...[res.data[0].province],...[res.data[0].city],...[res.data[0].area]]
                // this.selectedOption=["120000", "120100", "120102"];
                console.log(res.data[0].addressNo,res.data[0].addressNos)
            }
        })
    },
    handleImgSuccessBusiness(picture) {
      this.$set(this.data, "businessLicense", picture.url);
    },
    handleImgSuccessLetter(picture) {
      this.$set(this.data, "letterAttorney", picture.url);
    },
    handleImgSuccessImager(picture){
      this.$set(this.data, "imager", picture.url);
    },
    handleImgSuccessIntroduce(picture){
      let imgArr=this.data.enterpriseIntroduce;
      if(imgArr.length-8>0){
            this.$message({
                        message: "最多上传9张图片",
                        type: "warn"
                        });
      }else{
          imgArr.push({id:'',imager:picture.url});
      }
      this.$set(this.data, "enterpriseIntroduce", JSON.stringify(imgArr));
    },
    handleClick(tab, e) {
      //点击选项卡
      this.tabType = tab.index;
      var _val = tab.index; //
      this.getWaterDetails(_val);
    },
    getWaterDetails(val) {
        //tab0
      if (val == 0) {
        var ele1 = this.$refs.form1;
        this.handleScroll(ele1);
      }
      if (val == 1) {
        //tab1
        var ele2 = this.$refs.form2;
        this.handleScroll(ele2);
      }
      if (val == 2) {
        var ele3 = this.$refs.form3;
        this.handleScroll(ele3);
      }
      if (val == 3) {
        var ele4 = this.$refs.form4;
        this.handleScroll(ele4);
      }
      if (val == 4) {
        var ele5 = this.$refs.form5;
        this.handleScroll(ele5);
      }
    },
    handleScroll(element) {
      var content = document.querySelector(".content");
      this.scrollHeight = element.offsetTop;
      console.log(this.scrollHeight);
      var _this = this;
      setTimeout(() => {
        content.scrollTo({ behavior: "smooth", top: _this.scrollHeight - 104 });
      }, 0);
    },
    saveForm(formName){
              const Qs = require("qs");
         this.$refs[formName].validate(valid => {
                if (valid) {
                    // var enterIntroduce=this.data.enterpriseIntroduce;
                    // console.log(this.data.enterpriseIntroduce)
                    // this.data.enterpriseIntroduce=JSON.stringify(enterIntroduce);
                    this.data.passwords=this.passwords;
                    console.log( this.data,JSON.stringify(this.data))
                    console.log(Qs.stringify(this.data))
                        this.$axios.post("/one9-web/account/updateEnterPriseUser",
                            this.data
                          ).then(res => {
                            if (res.code == "OK") {
                              this.$message.success("修改成功")
                            } else {
                              alert(res.msg);
                            }
                          });
                  //             this.$message.success('保存成功');
                } else {
                  this.$message.error('请填写完成后提交');
                  console.log("error submit!!");
                  return false;
                }
              });

    }


  },
  watch: {},
  computed: {

  },
  created() {
        this.sum();
        this.getdata();
  },
  mounted() {
  },
  destoryed() {
  }
};
</script>
<style>
.account .is-required.el-form-item{margin-bottom: 32px;}
.attribute_group {
  height: 30px;
}
.attribute_group .attribute_title {
  text-align: right;
}
.el-tag {
  margin-right: 5px;
}
.specificationsImg .el-upload,
.specificationsImg .el-upload .avatar-uploader-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.specifications_title {
  height: 30px;
}
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 50px;
}

.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.content .el-header {
  height: 30px !important;
  line-height: 30px;
  margin-bottom: 10px;
}
.content .el-header {
  height: 30px !important;
  line-height: 30px;
  margin-bottom: 10px;
}
label.el-form-item__label {
  line-height: 30px;
}
.jiaoyi {
  text-align: center;
  color: #909399;
  line-height: 40px;
  font-size: 20px;
  border-bottom: 1px solid #909399;
}
/* } */
.content .el-col-12 {
    height: 62px;
  width: 50%;
  color: #909399;
  line-height: 30px;
  margin:10px 0;
}
.content .el-col-24 .el-form-item{
  line-height: 30px;
   margin-bottom: 35px;
}
.bg-purple .el-input {
  width: 150px;
}
.grid-content {
  text-align: left;
}
.navtop {
  position: absolute;
  top: 30px;
  left: 0;
  padding-left: 50px;
  right: 15px;
  background: #f0f0f0;
  z-index: 10;
  padding-top: 10px;
}
.form_wrap {
  padding: 50px 0;
}
.footerconfirm {
  position: absolute;
  top: 25px;
  text-align: right;
  padding: 10px;
  z-index: 11;
  right: 0;
  padding-right: 70px;
}
.clearfix:after {
  content: " ";
  display: block;
  line-height: 0;
  height: 0;
  visibility: hidden;
  clear: both;
}
.form3 {
  padding-bottom: 30px;
}
.el-collapse-item__header {
  text-align: center;
  background: #bfcbd9;
  height: 30px;
  margin-bottom: 10px;
  line-height: 30px;
}
.el-collapse-item__arrow {
  line-height: 30px;
}
.navtop .el-tabs__nav-wrap {
  padding-left: 25%;
}
.form5 .el-row {
  line-height: 40px;
  margin-bottom: 10px;
}
.el-cascader{width: 80%;}
.el-form-item__content>div{line-height: 30px;color: #000;display: block;}
@media (max-width:1300px) and (min-width:1000px){
  .navtop .el-tabs__nav-wrap{padding-left: 15% !important;}
}
@media (max-width:1000px) {
  .navtop .el-tabs__nav-wrap{padding-left:0% !important;}
}
</style>
